<template>
    <div class="box">
        <div class="panel">
            <div class="logo">
                <b>MoreFans</b>
            </div>
            <div class="login">
                <div class="tips">
                    <span >登录到管理系统</span>
                </div>

                <div class="from">
                    <el-form
                            label-width="70px"
                            label-position="left"

                            :model="login"
                            :rules="rules"
                            ref="login">
                        <el-form-item label="用户名" prop="account">
                            <el-input
                                    v-model="login.account"
                                    @keyup.enter.native="onLogin"
                                    placeholder="morefans"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                    v-model="login.password"
                                    @keyup.enter.native="onLogin"
                                    type="password"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button :loading="loading" class="button" type="primary" @click="onLogin">登录</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>


    .box {
        display: flex;
        background: rgb(210, 214, 222);
        height: 100%;
        justify-content: center;
        align-items: center;

        .button {
            width: 100%;
        }

        .panel {
            display: flex;
            width: 360px;
            height: 75%;
            //background: red;
            flex-direction: column;


            .tips {
                font-size: small;
                padding-bottom: 15px;
                text-align: center;
            }

            .logo {
                font-size: 35px;
                padding: 15px;
            }

            .login {

                background: white;
                padding: 30px;
            }
        }
    }
</style>

<script lang="ts">
    import { Vue,Component,} from 'vue-property-decorator'
    import {Api} from "../api/user";


    @Component
    export default class Login extends Vue {

        login = {
            account:"",
            password:"",
        };
        loading : boolean = false;

        rules = {
            account: [
                {required:true,message:"用户名不能为空",trigger:'blur'}
            ],
            password:[
                {required:true,message:"密码不能为空",trigger:'blur'}
            ]
        };

        onLogin() {

            let login:any = this.$refs['login'];

            login.validate((ok: boolean) => {

                if(ok) {
                    this.loading = true;
                    Api.Login(this.login)
                        .then(data => {

                            this.loading = false;
                            this.$local.UpdateSession(
                                data.uid,
                                data.token,
                            );

                            this.$router.push('/')
                        })
                        .catch(()=>{
                            this.loading = false;
                        })
                }
            })

        }
        
    }
</script>